<template>
  <div class="TopTab" :class='scrollTop>10?"TopTabActive":""'>
    <i :class='scrollTop>10?"iconActive":""' class="iconfont icon-fanhui" @click="backClass" style='font-weight:bold;font-size:20px' ></i>
    <div class="center" v-if='scrollTop>10' >
      <div  v-for='(item,index) in topList' :key="index" @click="active(index,item)"
      
      ><p :class="actives===index?'pActive':''" >{{item.name}}</p></div>
    </div>
    <i :class='scrollTop>10?"iconActive":""' class="iconfont icon-shenglvehao" 
      style='font-size:30px'></i>
  </div>
</template>

<script>
export default {
  props:{
    scrollTop:{
      type:
        Number||String
    },
  },
    data(){
        return{
            topList:[
              {name:"商品",scroll:11},{name:"评论",scroll:400},{name:"详情",scroll:703},{name:"推荐",scroll:1100}
              ],
            actives:0,//样式
        }
    },
   
  methods: {
    backClass() {   //回退
      this.$router.go(-1);
    },
    active(index,item){  //改变头部导航样式
        this.actives = index
        // console.log(this.topList[2]);
        this.$emit("active",item.scroll);
    },
  },
  
  watch:{
    // scrollTop(newVal,oldVal){
    //   console.log('监听',newVal,oldVal);
    // },
    scrollTop(newScroll){  //关联头部导航
        if(newScroll>0&&400>newScroll){
          this.actives = 0
        }
        if(newScroll>400&&703>newScroll){
          this.actives = 1
        }
        if(newScroll>700&&1100>newScroll){
          this.actives = 2
        }
        if(newScroll>1100){
          this.actives = 3
        }
    }
  }
};
</script>

<style scoped lang='scss'>
.TopTabActive{
  border-bottom: 2px solid black;
  background: white;
}
.TopTab {
  position: fixed;
  top:0;
  z-index: 1;
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: space-between;
  // margin-top: 50px;
  align-items: center;
  .icon-fanhui,.icon-shenglvehao {
    width: 150px;
    margin-left: 50px;
    color: white;
  }
  .iconActive{
    color: black;
  }

  .center {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    
  }
}
.pActive {
  border-bottom: 10px solid skyblue;
  // padding-bottom: 10px;
  
}
</style>